<template>

    <!-- 查询和其他操作 -->
    <div class="filter-container" style="margin: 10px 0 10px 0;" >
        <el-input v-model="queryParam.name"
                  clearable
                class="filter-item"
                style="width: 200px;"
                placeholder="请输入标签名"
        ></el-input>
        <el-button class="filter-item" type="primary" icon="el-icon-search"   @click="findTag">查找</el-button>
        <el-button class="filter-item" type="primary"  icon="el-icon-edit" @click=addTag>添加标签</el-button>
        <el-button class="filter-item" type="danger"  icon="el-icon-delete" >删除选中</el-button>
    </div>
    <el-table :data="tags.tag" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="序号" width="60" align="center">
            <template #default="scope">
                <span>{{scope.$index + 1}}</span>
            </template>
        </el-table-column>

        <el-table-column label="标签名" width="160" align="center">
            <template #default="scope">
                <span >{{scope.row.name}}</span>
            </template>
        </el-table-column>

        <el-table-column label="标签介绍" width="160" align="center">
            <template #default="scope">
                <span >{{scope.row.description}}</span>
            </template>
        </el-table-column>

        <el-table-column label="创建时间" width="160" align="center">
            <template #default="scope">
                <span >{{scope.row.created}}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" min-width="230">
            <template #default="scope">
                <el-button type="primary" size="small" @click="editTag(scope.row)">编辑</el-button>
                <el-button  type="danger" size="small" @click="delTags(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <div class="block">
        <el-pagination
                @current-change=getTag
                :current-page.sync="current"
                :page-size="PageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <!--添加或修改弹窗-->
    <el-dialog  :title="title" v-model="dialogFormVisible">
        <el-form  :model="tagForm" >
            <el-form-item  label="标签名" >
                <el-input  v-model="tagForm.name"  ></el-input>
            </el-form-item>
            <el-form-item label="标签介绍">
                <el-input  v-model="tagForm.description" ></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click=submitForm>确 定</el-button>
    </span>
        </template>
    </el-dialog>
</template>

<script>
    import { ElMessage } from 'element-plus'
    import {getTagPage,addBlogTag,delBlogTag,editBlogTag,getBlogTag} from '@/api/blogtag'
    import {ref,reactive} from 'vue';
    export default {
        name: "标签管理",
        setup(){
            const current =ref(0);
            const total =ref(0);
            const PageSize=ref(0);
            const tags= reactive({tag:[]});
            //获取分类
            getTag(1);
            function getTag( current) {
                getTagPage(current).then(res=>{
                    total.value = res.data.data.total;
                    PageSize.value =res.data.data.size;
                    tags.tag =res.data.data.records;
                })
            }
            const tagForm=reactive({
                name:'', description:''
            });
            const title=ref('');
            const dialogFormVisible=ref(false);
            const formLabelWidth =ref('120px');
            const isEdit=ref(false);
            //添加标签
            function addTag() {
                title.value='增加标签'
                dialogFormVisible.value=true;
                isEdit.value=false;

            }
            //编辑标签
            function editTag(row) {
                dialogFormVisible.value=true;
                title.value='编辑标签';
                tagForm.name=row.name;
                tagForm.mid=row.mid;
                tagForm.description=row.description;
                isEdit.value=true;

            }
            //向后台发送请求
            function submitForm() {
                console.log(tagForm)
                if (isEdit.value){
                    editBlogTag(tagForm).then(res=>{
                        console.log(tagForm)
                        const data=res.data.success;
                        if (data){
                            dialogFormVisible.value = false;
                            ElMessage.success({
                                message: '编辑标签成功',
                                type: 'success'
                            });
                            tagForm.name='';
                            tagForm.description='';
                            getTag(1);
                        }else{
                            dialogFormVisible.value = false;
                            ElMessage.error('编辑标签失败');
                        }
                    })
                }
                else{
                    addBlogTag(tagForm).then(res=>{
                        console.log(tagForm)
                        const data=res.data.success;
                        console.log(data)
                        if (data){
                            dialogFormVisible.value = false;
                            ElMessage.success({
                                message: '添加标签成功',
                                type: 'success'
                            });
                            tagForm.name='';
                            tagForm.description='';
                            getTag(1);
                        }else{
                            dialogFormVisible.value = false;
                            ElMessage.error('添加标签失败');
                        }
                    })
                }


            }

            //删除标签
            function delTags(row) {
                console.log(row.mid)
                delBlogTag(row.mid).then(res=>{
                    getTag(1);
                        console.log(res)
                })
            }

            //查询
            const queryParam=reactive({
                name:'',type:"1"
            });
            function findTag() {
                getBlogTag(queryParam).then( res =>{
                    tags.tag =res.data.data;

                })
            }
            return{current,total,PageSize,tags,getTag,title,formLabelWidth,dialogFormVisible,tagForm,addTag,editTag,submitForm
                ,delTags,queryParam,findTag
            }
        }
    }
</script>

<style scoped>

</style>